<template>
  <div id="border-box-title">
      <div class="border-box-title-text">
          <div class="title">{{ title }}</div>
          <slot name="extend"/>
        </div>
      <div class="border-box-content"><slot name="default"/></div>
  </div>
</template>

<script>
export default {
    props: {
        // 标题
        title: String,
    }
}
</script>

<style lang="scss" scoped>
#border-box-title {
    height: 100%;
    .border-box-title-text {
        width: 100%;
        height: 40px;
        // background: url(''); // 边框背景图
        background-repeat: no-repeat;
        background-position: bottom left;
        background-size: 100%;

        font-size: 1.5rem;
        color: #FFF;
        text-align: left;
        text-indent: 2em;
        // line-height: 30px;
        padding-top: 6px;
        font-family: 'PingFang', 'SC-Bold';
        font-weight: 600;
        position: relative;
        display: flex;
        justify-content: space-between;
        // border: 1px solid red;
        >div {
            flex: 1;
        }

        .title {
            height: 100%;
        }
    }
    .border-box-content {
        height: 100%;
        position: relative;
    }
}
</style>